import 'package:flutter/material.dart';
import 'package:flutterapp/util/colorUtil.dart';

class ContainerPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Container"),
      ),
      body: TextContent(),
    );
  }
}

class TextContent extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => TextContentState();
}

class TextContentState extends State<TextContent> {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(15),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            "1、Container 简介",
            style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
          ),
          Container(
            margin: EdgeInsets.fromLTRB(10, 15, 10, 15),
            width: double.infinity,
            height: 100,
            color: Colors.yellow,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Container(
                  alignment: Alignment.center,
                  width: 120,
                  height: 100,
                  color: ColorUtil.hexStringColor("#fab27b"),
                  child: Text(
                    "A",
                    textAlign: TextAlign.center,
                  ),
                ),
                Container(
                  alignment: Alignment.center,
                  width: 150,
                  height: 100,
                  color: ColorUtil.hexStringColor("#9b95c9"),
                  child: Text(
                    "B",
                    textAlign: TextAlign.center,
                  ),
                )
              ],
            ),
          ),
          Text("如上图，黄色部分为一个底部容器，A和B分别为黄色容器的子容器，底部容器中的child为Row组件，将A和B并列放在一起。")
        ],
      ),
    );
  }
}
